import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_widget/widget/animation_item.dart';

class MyAnimation extends StatefulWidget {
  const MyAnimation({Key? key}) : super(key: key);

  @override
  _MyAnimationState createState() => _MyAnimationState();
}

class _MyAnimationState extends State<MyAnimation>
    with TickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    //启动动画
    _animationController.forward();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            pinned: true,
            title: Text("动画"),
          ),

          ///
          SliverToBoxAdapter(
            child: SizedBox(
              height: 400,
              //注意数量总是保持一致
              child: GridView.builder(
                itemCount: 4,
                itemBuilder: (context, index) {
                  return AnimationItem(
                      animationController: _animationController,
                      count: 4,
                      index: index,
                      childWidget: Container(
                        decoration: BoxDecoration(
                            color: Colors.amber,
                            borderRadius: BorderRadius.circular(20)),
                        margin:
                            const EdgeInsets.only(top: 10, left: 15, right: 15),
                      ));
                },
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2),
              ),
            ),
          ),

          ///
          SliverToBoxAdapter(
            child: SizedBox(
              height: 150,
              child: ListView.builder(
                  itemCount: 10,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) {
                    return AnimationItem(
                        isHorizontal: true,
                        animationController: _animationController,
                        count: 100,
                        index: index,
                        childWidget: Container(
                          width: 150,
                          decoration: BoxDecoration(
                              color: Colors.blue,
                              borderRadius: BorderRadius.circular(20)),
                          margin: const EdgeInsets.only(
                              top: 10, left: 15, right: 15),
                        ));
                  }),
            ),
          ),

          ///
          SliverList(
            delegate: SliverChildBuilderDelegate((context, index) {
              return AnimationItem(
                  animationController: _animationController,
                  count: 100,
                  index: index,
                  childWidget: Container(
                    height: 200,
                    decoration: BoxDecoration(
                        color: Colors.greenAccent,
                        borderRadius: BorderRadius.circular(20)),
                    margin: const EdgeInsets.only(top: 10, left: 15, right: 15),
                  ));
            }, childCount: 100),
          ),
        ],
      ),
    );
  }
}
